<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11 0011
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>问题类型管理</title>
<link rel="stylesheet" href="/manage/css/static/question-type/demo.css">
<link rel="stylesheet" href="/manage/css/static/question-type/zTreeStyle.css">
<script src="/manage/js/lib/question-type/jquery-3.4.1.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.core.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.excheck.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.exedit.min.js"></script>
</head>
<body>
<div>
	<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
<script>
	//zTree的配置
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		edit: {
			enable: true,
			editNameSelectAll: true,
			showRemoveBtn: showRemoveBtn,
			showRenameBtn: showRenameBtn
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick:zTreeOnClick, //点击选中事件　　
			beforeDrag: beforeDrag,    // 可设置是否允许拖拽功能
			beforeEditName: beforeEditName,
			beforeRemove: beforeRemove,
			beforeRename: beforeRename,
			onRemove: onRemove,
			onRename: onRename
		}
	};
	//zTree初始化加载的节点树

	var zNodes =[
		<c:forEach items="${questionTypeList}" var="questionType" varStatus="stat">
			{id:${questionType.id},pId:${questionType.pId},name:"${questionType.name}", open:true},
		</c:forEach>
	];

	var log, className = "dark";
	function zTreeOnClick(event, treeId, treeNode) {
		console.log('zTreeOnClick');
		console.log(treeNode)
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
				nodes = treeObj.getCheckedNodes(true),
				v = "";
		for (var i = 0; i < nodes.length; i++) {
			v += nodes[i].name + ",";
			console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
		}
	}
	function beforeDrag(treeId, treeNode) {
		return false; //false=禁用拖拽功能， true=开启
	}
	function beforeEditName(treeId, treeNode) {
		console.log('beforeEditName');
		console.log(treeNode)
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
		zTree.editName(treeNode);
	}
	function beforeRemove(treeId, treeNode) {
		console.log('beforeRemove');
		className = (className === "dark" ? "":"dark");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.selectNode(treeNode);
		return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
	}
	function onRemove(e, treeId, treeNode) { //确定删除节点
		var id=treeNode.id;
		$.ajax({
			url: "/manage/knowledge-structure/deleteNode",
			data: {id:id},
			type:"post",
			success:function (mes) { }
		});
	}
	function beforeRename(treeId, treeNode, newName, isCancel) {
		console.log('beforeRename');
		className = (className === "dark" ? "":"dark");
		if (newName.length == 0) {
			setTimeout(function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.cancelEditName();
				alert("节点名称不能为空。");
			}, 0);
			return false;
		}
		return true;
	}
	function onRename(e, treeId, treeNode, isCancel) {
		var name=treeNode.name;
		var id=treeNode.id;
		$.ajax({
			url: "/manage/knowledge-structure/renameNode",
			data: {id:id,name:name},
			type:"post",
			success:function (mes) {
				alert("修改成功!");
			}
		});
	}
	function showRemoveBtn(treeId, treeNode) {
		return true;
	}
	function showRenameBtn(treeId, treeNode) {
		return true;
	}

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='添加子节点' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		$('.edit').attr('title', '编辑');
		$('.remove').attr('title', '删除');
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var obj = {pId:treeNode.id, name:"新增子节点 " + (newCount++)};
			$.ajax({
				url:"/manage/knowledge-structure/addNode",
				data: obj,
				dataType:"json",
				type:"post",
				success:function (jsonArray) {
					if(jsonArray!=null){
						alert("添加成功!");
					}
				}
			});
			zTree.addNodes(treeNode, obj);
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};

	$(function(){ //初始化加载树bai
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);  //加载树节点信息
		var zTree=$.fn.zTree.getZTreeObj("treeDemo");
		zTree.expand(true);
	});
</script>